<template>
  <div>
    <!-- 头部区域 -->
    <div class="head-container">
      <div class="header-con">
        <div class="header-search">
          <!-- logo -->
          <div class="header-box1">
            <label>CCX 餐餐香</label>
          </div>
          <!-- search -->
          <div class="header-box2" @click="showSearch">
            <indexSearch @focus="searchFocus" @change="searchChange" @confirm="searchConfirm"></indexSearch>
          </div>
        </div>
      </div>
    </div>
    <!-- body -->
    <div>
        <div class="body-left">
            <div :class="activeClass0 == 'hobby'?'active':''" @click="getActive0('hobby')"><p>猜你喜欢</p></div>
            <div  :class="activeClass0 == 'dish'?'active':''" @click="getActive0('dish')"><p>新鲜炒菜</p></div>
            <div  :class="activeClass0 == 'noodle'?'active':''" @click="getActive0('noodle')"><p>粉面专区</p></div>
            <div  :class="activeClass0 == 'dessert'?'active':''" @click="getActive0('dessert')"><p>烘焙美食</p></div>
        </div>

        <div v-if="activeClass0 == 'hobby'">
            <hobby></hobby>
        </div>
        <div v-if="activeClass0 == 'dish'">
            <freshDishs></freshDishs>
        </div>
        <div v-if="activeClass0 == 'noodle'">
            <noodels></noodels>
        </div>
        <div v-if="activeClass0 == 'dessert'">
            <desserts></desserts>
        </div>
    </div>
  </div>
</template>

<script>
import indexSearch from '../../components/indexSearch'
import freshDishs from '../../components/freshDishs'
import noodels from '../../components/noodles'
import desserts from '../../components/desserts'
import hobby from '../../components/hobby'

export default {
  components: { indexSearch, freshDishs, noodels, desserts, hobby },
  data() {
    return {
        activeClass0: 'dish',
    }
  },
  methods: {
      showSearch () {
          wx.navigateTo({
          url: '/pages/search/main'
          })
      },
      getActive0(val) {
          this.activeClass0 = val
      },
  },
  onShow() {  
    this.activeClass0 = 'dish'
    
  },
  // 分享页面
  onShareAppMessage () {
    return {
      title: `南北口味、集于一堂！
              温馨食尚、念念不忘！
              食堂点餐、我选餐餐香 ~`,
      path: '/pages/index/main'
    }
  }
}
</script>

<style scoped>
.head-container {
  width: 100%;
  height: 50px;
  background: #ea5149;
}

.header-con {
  position: fixed;
  z-index: 999;
  width: 100%;
}
.header-search {
  background: #ea5149;
  display: flex;
}
.header-box1 {
  display: inline-block;
  width: 45%;
  height: 40px;
  padding-top: 10px;
}
.header-box1 label {
  color: aliceblue;
  height: 30px;
  background: #FFA54F;
  font-size: 18px;
  border-radius: 10px;
  padding: 1px 5px;
  margin-left: 30px;
}
.header-box2 {
  display: inline-block;
  width: 50%;
  height: 40px;
  padding-top: 7px;
}

.body-left {
    position: fixed;
    width: 90px;
    height: 2000px;
    background: rgb(241, 234, 234);
}
.body-left div {
    margin-top: 2px;
    height: 40px;
    width: 90px;
    text-align:center;
}
.active {
    background: #ea5149;
}
.body-left div p {
    font-size: 16px;
    letter-spacing: 1px;
    height: 100%;
    display: inline-block;
    line-height: 40px;
    color: rgb(63, 58, 58);
}


</style>
